<template>
    <div>
        <pagetitle></pagetitle>
        <div>
            <el-card>
                <el-form :model="pageData" class="formbox" label-width="140px" disabled label-position="right">
                    <div class="formboxitem">
                        <div class="title">团队主体信息</div>
                        <el-form-item label="团队名称：">
                            <div class="selectorbtn">
                                <el-input v-model="pageData.teamName" disabled class="inputs" placeholder="团队名称"></el-input>
                            </div>
                            <span class="formTip">* 认证我是 法定代表人 或 授权管理员 的团队。</span>
                        </el-form-item>
                        <el-form-item label="团队简称：">
                            <el-input v-model="pageData.nameForShort" class="inputs" placeholder="请输入团队简称"></el-input>
                        </el-form-item>
                    </div>
                    <div class="formboxitem">
                        <div class="title">团队标志信息</div>
                        <el-form-item label="上传团队LOGO：">
                            <div>
                                <uploadFile :fileUrl="pageData.teamLogo" :key="pageData.teamLogo" text="上传LOGO" width="180px" height="180px" iconSize="0"></uploadFile>

                                <div class="certificateInputTip" style="margin-top: 10px">● 图片格式要求jpg、jpeg、bmp、png、pdf，不超过10M。</div>
                                <div class="certificateInputTip">● 为更好的服务，证件仅仅用于平台验证用户真实性，其他用户无法查看和下载。</div>
                            </div>
                        </el-form-item>
                    </div>
                    <div class="formboxitem">
                        <div class="title">团队法人信息</div>
                        <el-form-item label="法定代表人姓名：">
                            <el-input v-model="pageData.legalPersonName" disabled class="inputs" placeholder="请输入名字"></el-input>
                        </el-form-item>
                        <el-form-item label="法人联系方式：">
                            <el-input v-model="pageData.legalPersonPhone" disabled class="inputs" placeholder="请输入手机号"></el-input>
                            <span class="formTip">* 联系电话必须为法人本人</span>
                        </el-form-item>
                        <el-form-item label="法人身份证号：">
                            <el-input v-model="pageData.legalPersonIdNum" class="inputs" placeholder="请输入身份证号码"></el-input>
                            <span class="formTip">* 若法定代表人为非中国大陆居民，请填写办理企业证件使用的有效证件号码</span>
                        </el-form-item>
                        <el-form-item label="上传个人证件：">
                            <div>
                                <div class="uploadcertificate">
                                    <div class="uploadcertificateItem">
                                        <uploadFile :fileUrl="pageData.legalPersonIdFront" :key="pageData.legalPersonIdFront" tableItem="legalPersonIdFront" width="275px" height="170px" :showIcon="false" :showText="false"></uploadFile>
                                        <div class="uploadcertificateTitle">居民身份证正面照片</div>
                                    </div>
                                    <div class="uploadcertificateItem">
                                        <uploadFile :fileUrl="pageData.legalPersonIdBack" :key="pageData.legalPersonIdBack" tableItem="legalPersonIdBack" width="275px" height="170px" :showIcon="false" :showText="false"></uploadFile>
                                        <div class="uploadcertificateTitle">居民身份证反面照片</div>
                                    </div>
                                    <div class="uploadcertificateItem">
                                        <uploadFile :fileUrl="pageData.legalPersonIdInHand" :key="pageData.legalPersonIdInHand" tableItem="legalPersonIdInHand" width="275px" height="170px" :showIcon="false" :showText="false"></uploadFile>
                                        <div class="uploadcertificateTitle">手持居民身份证正面照片</div>
                                    </div>
                                </div>
                                <div class="certificateInputTip">● 图片格式要求jpg、jpeg、bmp、png、pdf，不超过10M。</div>
                                <div class="certificateInputTip">● 可以添加“云上农场备案、服务申请、服务认证、服务备案”等水 印；但不能遮挡关键信息，例如姓名、证件号。</div>
                                <div class="certificateInputTip">● 为更好的服务，证件仅仅用于平台验证用户真实性，其他用户无法查看和下载。</div>
                                <div class="certificateInputTip" style="color: #f11212; margin-top: 10px">
                                    声明：在整个 <u> 授权 </u> 过程中，该 被授权人 的一切行为，均代表本单位，与本单位的行为具有同等法律效力。本单位将承担该代理人行为的全部法律后果和法律责任。
                                </div>
                            </div>
                        </el-form-item>
                    </div>
                    <div class="formboxitem">
                        <div class="title">统一社会信用代码信息</div>
                        <el-form-item label="统一社会信用代码：">
                            <el-input v-model="pageData.socialCreditCode" class="inputs" placeholder="请输入团队的组织机构代码"></el-input>
                            <span class="formTip">*统一社会信用认证代码后不可更改，请准确输入</span>
                        </el-form-item>
                        <el-form-item label="统一社会信用证件：">
                            <div>
                                <div class="uploadcertificate">
                                    <div class="uploadcertificateItem uploadcertificateItem1">
                                        <uploadFile :fileUrl="pageData.socialCreditCard" :key="pageData.socialCreditCard" tableItem="socialCreditCard" width="275px" height="170px" :showIcon="false" :showText="false"></uploadFile>
                                    </div>
                                </div>
                                <div class="certificateInputTip">● 图片格式要求jpg、jpeg、bmp、png、pdf，不超过10M。</div>
                                <div class="certificateInputTip">● 可以添加“云上农场备案、服务申请、服务认证、服务备案”等水 印；但不能遮挡关键信息，例如姓名、证件号。</div>
                                <div class="certificateInputTip">● 为更好的服务，证件仅仅用于平台验证用户真实性，其他用户无法查看和下载。</div>
                            </div>
                        </el-form-item>
                        <el-form-item label="团队注册地址：">
                            <addRess class="inputs" :value="pageData.address.keyText" :key="pageData.address.keyText"></addRess>
                        </el-form-item>
                        <el-form-item label="">
                            <el-input v-model="pageData.detailedAddress" class="inputs" placeholder="请输入详细地址"></el-input>
                        </el-form-item>
                    </div>
                    <div class="formboxitem">
                        <div class="title">团队分类信息</div>
                        <el-form-item label="机构类型：">
                            <el-cascader ref="institutionalTypecascader" v-model="pageData.classificationId" class="inputs" placeholder="请选择机构类型" :props="props"></el-cascader>
                            <span class="formTip">* 参考标准：GB/T 20091-2006 组织机构类型</span>
                        </el-form-item>
                        <el-form-item label="机构级别：" v-if="pageData.classificationId[0] != '12'">
                            <addRess
                                :value="pageData.organizationlevel ? pageData.organizationlevel.keyText : ''"
                                :key="pageData.organizationlevel"
                                :checkStrictly="true"
                                placeholder="请选择机构级别"
                                :getAreaData="getOrganizationlevel"
                                class="inputs"
                            ></addRess>
                        </el-form-item>
                        <!-- 产业分类列表 -->
                        <el-form-item label="产业分类：" v-if="pageData.industrialClassificationList.length > 0 && pageData.classificationId[0] == '12'">
                            <div class="classfiy">
                                <div v-for="(tag, index) in pageData.industrialClassificationList" :key="index">
                                    <el-tag>
                                        {{ tag.industrialName }}
                                    </el-tag>
                                </div>
                            </div>
                        </el-form-item>
                    </div>
                    <div class="formboxitem">
                        <div class="title titlesss">
                            申请人位置
                            <div class="right">
                                <div>经度：<el-input v-model="pageData.applicantLon" class="mapdata" placeholder=""></el-input></div>
                                <div>纬度: <el-input v-model="pageData.applicantLat" class="mapdata" placeholder=""></el-input></div>
                            </div>
                        </div>

                        <div class="mars3ds">
                            <mars3d
                                ref="mars3ds"
                                height="100%"
                                :teamName="pageData.teamName"
                                :key="pageData.mapKey"
                                :addr="`${pageData.address.valueText}/${pageData.detailedAddress}`"
                                :lng="pageData.applicantLon"
                                :lat="pageData.applicantLat"
                            ></mars3d>
                            <!-- <mars3d ref="mars3ds" height="100%"></mars3d> -->
                        </div>
                    </div>
                </el-form>
                <div class="formboxitem">
                    <el-button type="primary" plain @click="router.back()">返回</el-button>
                    <el-button type="primary" plain @click="pass">认证通过</el-button>
                    <el-button type="primary" plain @click="dialogVisible1 = true">认证不通过</el-button>
                </div>
            </el-card>
        </div>
        <div class="submitsuccessfully" v-if="dialogVisible">
            <div class="contMsg">
                <div class="title">团队认证 审核通过</div>
                <img src="../../../assets/images/success.png" alt="" srcset="" />
                <div class="success">团队认证 申请平台审核 <span>已经通过</span></div>
                <div class="tipcg">
                    您审核通过的 <span>{{ pageData.teamName }}</span> 团队认证审核，开通团队功能。
                </div>
                <div class="btnbox">
                    <div class="btnzdl sty1" @click="pageToBack">发送信息</div>
                    <div class="btnzdl sty2" @click="pageToBack">知道了</div>
                </div>
            </div>
        </div>
        <div class="submitsuccessfully" v-if="dialogVisible1">
            <div class="contMsg">
                <div class="title" style="margin: 28px 0">消息</div>
                <div class="dialogCentertitle">在 团队认证 过程中，因为您提供的：</div>
                <div class="dialogCentercheckboxItem">
                    <div v-for="(item, index) in failMsg" :key="index">
                        <el-checkbox v-if="item.label" v-model="item.checked" size="default" :label="item.label" />
                        <input v-else type="text" v-model="item.text" class="dialogInput" placeholder="请输入其他原因" />
                    </div>
                </div>
                <div class="dialogCenterTip">造成 <span>团队实名认证</span> 未能通过，请核实后再提交申请。</div>
                <div class="btnbox" style="margin-top: 30px">
                    <div class="btnzdl sty2" @click="fail">认证不通过</div>
                    <div class="btnzdl sty2" @click="dialogVisible1 = false">取消</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import mars3d from "@/components/mars3d.vue";
import type { CascaderProps } from "element-plus";
import { ref, reactive, computed, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useStore } from "vuex";
import { ElMessage } from "element-plus";
import { institutionalType, industrialClassifications, institutionalTypeOne, industrialClassificationsOne, getApplyCertification, teamPosition } from "@/api/team";
const store = useStore();
const route: any = useRoute();
const router = useRouter();
const userInfo: any = computed((e: any) => {
    return store.getters.userInfo;
});
const dialogVisible = ref(false);
const dialogVisible1 = ref(false);
const failMsg: any = ref([
    {
        label: "证件模糊；",
        checked: false,
    },
    {
        label: "证件号码与输入号码不一致；",
        checked: false,
    },
    {
        label: "信息录入不完整；",
        checked: false,
    },
    {
        label: "无法确认是否本人手持证件照；",
        checked: false,
    },
    {
        label: "",
        text: "",
    },
]);
const pageData: any = reactive({
    teamId: "", // 团队ID
    teamName: "", // 团队名称
    nameForShort: "", // 团队简称
    teamLogo: "", // 团队logo
    legalPersonName: "", // 法定代表人姓名
    legalPersonPhone: "", // 法人联系方式
    legalPersonIdNum: "", // 法人身份证号
    legalPersonIdFront: "", // 居民身份证正面照片
    legalPersonIdBack: "", // 居民身份证反面照片
    legalPersonIdInHand: "", // 手持居民身份证正面照片
    socialCreditCode: "", // 统一社会信用代码
    socialCreditCard: "", // 统一社会信用证件
    detailedAddress: "", // 详细地址
    address: "", // 认证团队地址
    classificationId: [], // 机构类型
    organizationlevel: "", // 机构级别
    industrialClassificationIds: [], // 产业分类
    industrialClassificationList: [],
    // myRole: 0, // 我的身份。0：法定代表人；1：授权管理员；2：其他人员
    // contactsName: teamMsg.contactsName, // 联系人名字
    // contactsPhone: teamMsg.contactsPhone, // 联系人电话
    // contactsAddressArea: teamMsg.contactsAddressArea, // 联系人地址
    // contactsAddress: teamMsg.contactsAddress, // 联系人地址
    applicantLon: "", // 团队注册经度
    applicantLat: "", // 团队注册纬度
    certifiedId: "",
    mapKey: new Date().getTime(),
});
// 获取团队详情
const getPageData = () => {
    getApplyCertification(route.query.id).then((res) => {
        const data = res.data;
        pageData.teamId = data.teamId; // 团队ID
        pageData.teamName = data.teamName; // 团队名称
        pageData.nameForShort = data.nameForShort; // 团队简称
        pageData.teamLogo = data.teamLogo; // 团队logo
        pageData.legalPersonName = data.legalPersonName; // 法定代表人姓名
        pageData.legalPersonPhone = data.legalPersonPhone; // 法人联系方式
        pageData.legalPersonIdNum = data.legalPersonIdNum; // 法人身份证号
        pageData.legalPersonIdFront = data.legalPersonIdFront; // 居民身份证正面照片
        pageData.legalPersonIdBack = data.legalPersonIdBack; // 居民身份证反面照片
        pageData.legalPersonIdInHand = data.legalPersonIdInHand; // 手持居民身份证正面照片
        pageData.socialCreditCode = data.socialCreditCode; // 统一社会信用代码
        pageData.socialCreditCard = data.socialCreditCard; // 统一社会信用证件
        pageData.detailedAddress = data.detailedAddress; // 详细地址
        pageData.address = data.address; // 认证团队地址
        pageData.classificationId = data.classificationId; // 机构类型
        pageData.organizationlevel = data.organizationlevel; // 机构级别
        pageData.industrialClassificationIds = data.industrialClassificationIds; // 产业分类
        pageData.industrialClassificationList = data.industrialClassificationList; // 产业分类
        pageData.applicantLon = data.applicantLon; // 团队注册经度
        pageData.applicantLat = data.applicantLat; // 团队注册纬度
        pageData.certifiedId = data.certifiedId; // 团队注册纬度
        pageData.mapKey = new Date().getTime();
        console.log(pageData);
        if (pageData.address && typeof pageData.address == "string") {
            pageData.address = JSON.parse(pageData.address);
        }
        if (pageData.organizationlevel && typeof pageData.organizationlevel == "string") {
            pageData.organizationlevel = JSON.parse(pageData.organizationlevel);
        }
        if (pageData.classificationId) {
            setClassfy();
        }
    });
};
getPageData();
const setClassfy = () => {
    if (pageData.classificationId) {
        let id: number = pageData.classificationId;
        pageData.classificationId = [];
        pageData.classificationId.length = 0;
        institutionaltype(id);
    }
    // if (pageData.industrialClassificationList && pageData.industrialClassificationList.length > 0) {
    //     let array = pageData.industrialClassificationList;
    //     array.forEach((v: any, i: any) => {
    //         industrialclassification(v.industrialId, [], []);
    //     });
    // }
};
// 审核通过
const pass = () => {
    teamPosition({
        certifiedId: pageData.certifiedId,
        flag: "1",
        reviewer: userInfo.value.userId,
    }).then((res: any) => {
        ElMessage.success("操作成功");
        dialogVisible.value = true;
        pageToBack();
    });
};
// 审核不通过
const fail = () => {
    let msg = "";
    failMsg.value.forEach((v: any) => {
        if (v.checked) {
            msg += v.label;
        }
        if (v.text) {
            msg += v.text;
        }
    });
    teamPosition({
        certifiedId: pageData.certifiedId,
        flag: "2",
        reviewer: userInfo.value.userId,
        reason: msg,
    }).then((res: any) => {
        ElMessage.success("操作成功");
        dialogVisible1.value = true;
        pageToBack();
    });
};
const pageToBack = () => {
    router.back();
};
// 机构类型数据懒加载
const props: CascaderProps = {
    label: "type",
    value: "classificationId",
    lazy: true,
    checkStrictly: true,
    lazyLoad(node: any, resolve) {
        const { data, level } = node;
        institutionalType(data.classificationId ? data.classificationId : 0).then((res) => {
            res.data.forEach((v: any) => {
                institutionalType(v.classificationId).then((res1) => {
                    if (res1.data.length == 0) {
                        v.leaf = true;
                    } else {
                        v.leaf = false;
                    }
                });
            });
            setTimeout(() => {
                resolve(res.data);
            }, 500);
        });
    },
};
// 产业分类数据懒加载
const industrialClassificationIdsValues: any = reactive([]);
const props1: CascaderProps = {
    checkStrictly: true,
    label: "industrialName",
    value: "industrialId",
    lazy: true,
    lazyLoad(node: any, resolve) {
        const { data, level } = node;
        industrialClassifications(data.industrialId ? data.industrialId : 0).then((res) => {
            res.data.forEach((v: any) => {
                industrialClassifications(v.industrialId).then((res1) => {
                    if (res1.data.length == 0) {
                        v.leaf = true;
                    } else {
                        v.leaf = false;
                    }
                });
            });
            setTimeout(() => {
                resolve(res.data);
            }, 500);
        });
    },
};
// 机构级别
const getOrganizationlevel = (data: object) => {
    pageData.organizationlevel = data;
};
// 数据回显，
// 递归查询机构类型
const institutionaltype = (id: number | string) => {
    institutionalTypeOne(id).then((res: any) => {
        let data: any = res.data;
        pageData.classificationId.unshift(data.classificationId);
        if (data.parentId != 0) {
            institutionaltype(data.parentId);
        }
    });
};
// 递归查询产业分类 industrialClassificationIdsValues
// const industrialclassification = (id: number | string, idList: any | [], array: any | []) => {
//     industrialClassificationsOne(id).then((res) => {
//         const data: any = res.data;
//         array.unshift(data.industrialName);
//         idList.unshift(data.industrialId);
//         if (data.parentId != 0) {
//             industrialclassification(data.parentId, idList, array);
//         } else {
//             pageData.industrialClassificationIds.push(idList[idList.length - 1]);
//             industrialClassificationIdsValues.push(array.join("/"));
//         }
//     });
// };
</script>
<style lang="scss" scoped>
.teamcertificationtop {
    margin-bottom: 20px;
    .teamcertificationtopbody {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .teamcertificationimg {
            width: 64px;
            margin-right: 20px;
        }
        .teamcertificationtopright {
            div {
                font-size: 16px;
                color: #333333;
            }
            span {
                font-size: 14px;
                color: #666666;
            }
        }
    }
}
.uploadcertificate {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    .uploadcertificateItem {
        margin-right: 20px;
        background-repeat: no-repeat;
        background-size: 210px 130px;
        background-position: 50% 20%;
        &:nth-child(1) {
            background-image: url(@/assets/image/card2.png);
        }
        &:nth-child(2) {
            background-image: url(@/assets/image/card1.png);
        }
        &:nth-child(3) {
            background-image: url(@/assets/image/card3.png);
        }
        .uploadcertificateTitle {
            text-align: center;
            font-size: 14px;
            color: #333333;
            margin-top: 10px;
            margin-bottom: 10px;
        }
    }
    .uploadcertificateItem1 {
        background-position: 50%;
        background-image: url(@/assets/image/team1.png) !important;
        margin-bottom: 10px;
    }
}

.certificateInputTip {
    color: #666666;
    font-size: 12px;
    line-height: 20px;
}
.mars3ds {
    height: 540px;
    // margin-top: 15px;
}
.mapdata {
    width: 100px;
    margin-right: 20px;
}
.titlesss {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px !important;
    .right {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        font-weight: 400;
    }
}
.tip {
    text-align: center;
    padding-top: 120px;
    min-height: calc(100vh - 135px);
    .title {
        font-weight: bold;
        font-size: 24px;
        color: #333333;
    }
    .img {
        width: 72px;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        margin: 70px 0;
    }
    .success {
        font-weight: normal;
        font-size: 20px;
        color: #333333;
        margin-top: 38px;
        text-align: center;
        span {
            color: #ff0000;
        }
    }
    .tipcg {
        font-size: 16px;
        color: #999999;
        text-align: center;
        margin-top: 24px;
        padding: 0;
    }
}
.submitsuccessfully {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(51, 51, 51, 0.1);
    z-index: 999;
    .contMsg {
        width: 655px;
        height: 469px;
        background: #ffffff;
        border-radius: 5px;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        transform: scale(0.7);
        .title {
            text-align: center;
            margin-top: 57px;
            font-weight: bold;
            font-size: 24px;
            color: #333333;
        }
        img {
            width: 80px;
            position: relative;
            left: 50%;
            transform: translateX(-50%);
            margin-top: 38px;
        }
        .success {
            font-weight: normal;
            font-size: 20px;
            color: #333333;
            margin-top: 38px;
            text-align: center;
            span {
                color: #ff0000;
            }
        }
        .tipcg {
            font-size: 16px;
            color: #999999;
            text-align: center;
            margin-top: 24px;
            padding: 0;
            span {
                color: #ff0000;
            }
        }
        .btnbox {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 68px;
            .btnzdl {
                width: 119px;
                height: 47px;
                text-align: center;
                line-height: 47px;
                cursor: pointer;
                font-size: 20px;
                color: #ffffff;
                margin: 0 10px;
            }
            .sty1 {
                background: #299c37;
            }
            .sty2 {
                background: rgba(0, 0, 0, 0.05);
                color: #333333;
            }
        }
        .dialogCentertitle {
            font-size: 20px;
            color: #666666;
            position: relative;
            left: 50%;
            transform: translateX(-50%);
            width: 449px;
        }
        .dialogCentercheckboxItem {
            background: rgba(0, 0, 0, 0.02);
            border-radius: 5px;
            width: 449px;
            height: 197px;
            font-size: 16px;
            padding: 20px;
            margin: 16px 0;
            position: relative;
            left: 50%;
            transform: translateX(-50%);
            .dialogInput {
                background: none;
                border: none;
                border-bottom: 1px solid #cccccc;
                width: 330px;
                margin-top: 5px;
            }
        }
        .dialogCenterTip {
            font-size: 20px;
            color: #666666;
            position: relative;
            left: 50%;
            transform: translateX(-50%);
            width: 449px;
            white-space: nowrap;
        }
    }
}
</style>
